<template>
	<div class="shujusousuo">
		<div class="sousuo">
			<div class="sousuo_header">
				<ul>
					<li>
						<router-link :to="'/home/'+chuan_id+'/shujusousuo/darensousuo'">
							达人搜索
						</router-link>
					</li>
					<li>
						<router-link :to="'/home/'+chuan_id+'/shujusousuo/daihuosousuo'">
							带货达人搜索
						</router-link>
					</li>
					<li>
						<router-link :to="'/home/'+chuan_id+'/shujusousuo/shangpinsousuo'">
							商品搜索
						</router-link>
					</li>
					<li>
						<router-link :to="'/home/'+chuan_id+'/shujusousuo/shipinsousuo'">
							视频搜索
						</router-link>
					</li>
					<li>
						<router-link :to="'/home/'+chuan_id+'/shujusousuo/pinpaisousuo'">
							品牌搜索
						</router-link>
					</li>
				</ul>
				<!-- <div class="sousuo_huaxian"></div> -->
			</div>
		</div>
		<div class="qiyu">
			<keep-alive>
				<router-view></router-view>
			</keep-alive>
		</div>
	</div>
</template>

<script>
	export default{
		name:"shujusousuo",
		data(){
			return{
				chuan_id:'',
				path_zhi:''
			}
		},
		created(){
			// console.log("没收到可接受的");
		},
		//在keep-alive使用下才生效，每次组件创建时执行
		activated(){
			this.$router.push(this.path_zhi);
		},
		//获取当前路由处于活跃状态
		beforeRouteLeave(to,from,next){
			this.path_zhi=this.$route.path;
			next()
		},
		watch:{
			//实时监控路由变化，获取路由中的信息
			$route(to,from){
				this.chuan_id=to.path.split("/")[2]
			}
		},
		mounted:function(){
			this.chuan_id=this.$route.path.split("/")[2]
			
			$('.sousuo_header ul li').eq(0).css({"color":"#0091FF"})
			$('.sousuo_header ul li').click(function(){
				var souyiye=$(this).offset().left;
				var souyiye1=$('.sousuo_header ul li').eq(0).offset().left;
				
				$(this).css({"color":"#0091FF"})
				$(this).siblings().css({"color":"#333"})
				$(this).siblings().css({"color":'#333'})
				
				$(this).parent("ul").siblings(".sousuo_huaxian").css({
					"left":souyiye-souyiye1+souyiye1/2-10+"px"
				})
			})
		},
		methods:{
			
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.shujusousuo{
		border-radius:0.1rem ;
		
		.sousuo{
			background-color: #fff;
			border-bottom:1px solid #E7E7E7 ;
			
			.sousuo_header{
				position: relative;
				ul{
					list-style: none;
					padding-left:2.5rem ;
					
					li{
						cursor: pointer;
						color: #333;
						font-size: 0.5rem;
						float: left;
						
						a{
							display: block;
							padding:0.8rem 1.5rem;
							text-decoration: none;
							color: #333;;
						}
						.router-link-active{
							color: #0091FF;
							border-bottom:2px solid #0091FF;
							transition: all 0.1s ease;
						}
					}
					li:hover{
						color: #0091FF;
					}
				}
				ul::after{
					content: "";
					display: block;
					clear: both;
				}
			}
			
			.sousuo_huaxian{
				transition: all 0.5s ease;
				width: 2rem;
				height: 0.1rem;
				bottom: 0;
				left: 4rem;
				border-radius:0.2rem ;
				background-color: #0091FF;
				position: absolute;
			}
		}
		
	}
</style>